<script>
import TagInput from '@/components/TagInput.vue';
export default {
    name: "assetManage",
    data() {
        return {
            columns: [
                {
                    title: "资产编号",
                    key: "assetNo",
                    width: 150,
                    sortable: true,
                },
                {
                    title: "资产名称",
                    width: 150,
                    key: "assetName",
                },
                {
                    title: "资产种类编号",
                    width: 150,
                    key: "assetTypeNo",
                },
                {
                    title: "资产标签",
                    width: 150,
                    key: "assetLabel",
                },
                {
                    title: "资产描述",
                    width: 150,
                    key: "assetDesc",
                    tooltip: true,
                },
                {
                    title: "资产种类",
                    width: 150,
                    key: "assetCategory",
                },
                {
                    title: "资产状态",
                    width: 150,
                    slot: "status",
                },
                {
                    title: "登记时间",
                    width: 150,
                    key: "registerTime",
                },
                {
                    title: "最后更新时间",
                    width: 150,
                    key: "lastUpdatedTime",
                },
                {
                    title: "依赖组织",
                    width: 150,
                    key: "orgName",
                },
                {
                    title: "资产拥有者",
                    width: 150,
                    key: "assetUser",
                },
                {
                    title: "ip",
                    width: 150,
                    key: "ip",
                },
                {
                    title: "操作",
                    width: 160,
                    align: "center",
                    fixed: "right",
                    slot: "action",
                }
            ],
            assetRule: {
                email: [
                    { type: "email", message: "请输入邮箱", trigger: "change" }
                ]
            },
            assetData: [],//全部数据
            orgNameData: [],//所有组织信息
            searchData:{
                name:"",
                label:"",
                category:"",
                orgId:"",
            },
            assetStatusStr: [
                {
                    code: 0,
                    desc: "使用中",
                },
                {
                    code: 1,
                    desc: "维修中",
                },
                {
                    code: 2,
                    desc: "已废弃",
                },
            ],
            isShow: false,
            isCreate: false,
            changeData: {},//需要修改的数据

        };
    },
    methods: {
        handleCreate() {//创建按钮
            this.changeData = {};
            this.changeData.id = -1;
            this.changeData.registertime = "";
            this.changeData.lastupdatedtime = "";
            console.log(this.changeData);
            this.isCreate = true;
            this.isShow = true;
        },
        handleChange(data) {//修改按钮
            this.changeData = data;
            this.isCreate = false;
            this.isShow = true;

        },
        handleDelete(index) {//删除按钮
            this.confirm(() => {
                this.$api.post("asset/asset/delete/" + index).then((res) => {
                    this.info(res.msg);
                    this.renew();
                });
            })
        },
        handleSubmit() {//提交修改
            console.log(this.changeData);
            var url = this.changeData.id == -1 ? "asset/asset/create" : "asset/asset/update";
            this.$api.post(url, this.changeData).then((res) => {
                this.info(res.msg);
                this.renew();
            })
        },
        emitData(value, label) {
            this.changeData[label] = value;
            // console.log("修改父组件")
            // console.log(this.changeData);
        },
        confirm(func) {
            this.$Modal.confirm({
                title: "确认框",
                onOk: func,
            });
        },
        renew() {
            this.$api.get("asset/asset/list",this.searchData).then((res) => {
                this.assetData = res.data.data;
            });
        },
        info(message) {
            this.$Notice.info({
                title: "提示",
                desc: message,
            });
        },
    },
    created() {
        this.renew();
        this.$api.get("asset/asset/orgs").then((res) => {
            this.orgNameData = res.data.data;
            console.log(this.orgNameData);
        })
    },
    components: { TagInput }
}
</script>
<template>
    <div class="main_container">
        <Modal v-model="isShow" title="资产信息" @on-ok="handleSubmit" draggable>
            <Form :label-width="100" :rules="assetRule" :model="changeData">
                <FormItem label="资产名称">
                    <Input v-model="changeData.assetName" />
                </FormItem>
                <FormItem label="资产种类编号">
                    <Input v-model="changeData.assetTypeNo" />
                </FormItem>
                <FormItem label="资产标签">
                    <tag-input :tag_str="changeData.assetLabel" :label="'assetLabel'" @returnData="emitData"></tag-input>
                </FormItem>
                <FormItem label="资产详情">
                    <Input v-model="changeData.assetDesc" type="textarea" :rows="4" />
                </FormItem>
                <FormItem label="资产种类">
                    <tag-input :tag_str="changeData.assetCategory" :label="'assetCategory'" @returnData="emitData"></tag-input>
                </FormItem>
                <FormItem label="资产状态">
                    <Select v-model="changeData.assetStatus"
                        :default-label="changeData.assetStatus ? assetStatusStr[changeData.assetStatus].desc : ''">
                        <Option v-for="statusStr in assetStatusStr" :value="statusStr.code" :key="statusStr.code">{{
                            statusStr.desc }}</Option>
                    </Select>
                </FormItem>
                <FormItem label="所属组织">
                    <Select v-model="changeData.belongOrg">
                        <Option v-for="org in orgNameData" :value="org.id" :key="org.id">{{ org.orgName }}</Option>
                    </Select>
                </FormItem>
                <FormItem label="资产拥有者" prop="email">
                    <Input v-model="changeData.assetUser" type="email" />
                </FormItem>
                <FormItem label="资产ip">
                    <Input v-model="changeData.ip" />
                </FormItem>
            </Form>
        </Modal>
        <Row>
            <Col span="5" offset="3">
            资产名称:
            <Input class="input_size" v-model="searchData.name"/>
            </Col>
            <Col span="5">
            资产分类:
            <Input class="input_size" v-model="searchData.category"/>
            </Col>
            <Col span="5">
            资产标签:
            <Input class="input_size" v-model="searchData.label"/>
            </Col>
            <Col span="5">
            组织结构:
            <Select v-model="searchData.orgId" class="input_size">
                <Option v-for="org in orgNameData" :value="org.id" :key="org.id">{{ org.orgName }}</Option>
            </Select>
            </Col>
            <Col span="1">
                <Button type="primary" icon="ios-search" shape="circle" @click="renew()"></Button>
            </Col>
        </Row>
        <Row>
            <Button type="success" class="add_btn" @click="handleCreate()">添加资产</Button>
        </Row>
        <div class="table_container">
            <Table highlight-row border :columns="columns" :data="assetData" width="1115" height="420">
                <template #action="{ row }">
                    <Space>
                        <Button type="info" @click="handleChange(row)">修改</Button>
                        <Button type="error" @click="handleDelete(row.id)">删除</Button>
                    </Space>
                </template>
                <template #status="{ row }">
                    {{ assetStatusStr[row.assetStatus].desc }}
                </template>
            </Table>
        </div>
    </div>
</template>
<style scoped>
.main_container {
    width: 90%;
    height: 90%;
    border-radius: 10px;
    padding: 10px;
    border: solid;
    margin: auto;
    margin-top: 20px;
}

.table_container {
    width: 100%;
    height: 90%;
    /* overflow: scroll; */
}

.add_btn {
    margin: 10px auto;
    margin-left: 80%;
    width: 160px;
}

.input_size {
    width: 160px;
}
</style>